<template>
    <div id="top_draw" class="inner draw" @mousemove="beginPath($event)">
        <div class="wrap">
            <canvas id="canvas" class="fl" width="600" height="540" @mousedown="canvasDown($event)" @mouseup="canvasUp($event)" @mousemove="canvasMove($event)" @touchstart="canvasDown($event)" @touchend="canvasUp($event)" @touchmove="canvasMove($event)">
            </canvas>
        </div>
        <div id="canvas-drawImage">
            <button class="SubmitBtn" @click="getImage()">确认</button>
            <button class="SubmitBtn" @click="goback()">取消</button>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            context: {},
            imgUrl: [],
            canvasMoveUse: true,
            // 存储当前表面状态数组-上一步
            preDrawAry: [],
            // 存储当前表面状态数组-下一步
            nextDrawAry: [],
            // 中间数组
            middleAry: [],
            // 配置参数
            config: {
                lineWidth: 1,
                lineColor: '#000',
                shadowBlur: 2
            }
        }
    },
    created() {
    },
    mounted() {
        const canvas = document.querySelector('#canvas')
        this.context = canvas.getContext('2d')
        this.initDraw()
        this.setCanvasStyle()
    },
    methods: {
        isPc() {
            const userAgentInfo = navigator.userAgent
            const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
            let flag = true
            for (let v = 0; v < Agents.length; v++) {
                if (userAgentInfo.indexOf(Agents[v]) > 0) {
                    flag = false
                    break
                }
            }
            return flag
        },
        removeImg(src) {
            this.imgUrl = this.imgUrl.filter(item => item !== src)
        },
        initDraw() {
            const preData = this.context.getImageData(0, 0, 600, 400)
            // 空绘图表面进栈
            this.middleAry.push(preData)
        },
        canvasMove(e) {
            if (this.canvasMoveUse) {
                console.log('canvasMove')
                const t = e.target
                let canvasX
                let canvasY
                if (this.isPc()) {
                    canvasX = e.clientX - t.parentNode.offsetLeft
                    canvasY = e.clientY - t.parentNode.offsetTop
                } else {
                    canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft
                    canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop
                }
                this.context.lineTo(canvasX, canvasY)
                this.context.stroke()
            }
        },
        beginPath(e) {
            const canvas = document.querySelector('#canvas')
            if (e.target !== canvas) {
                console.log('beginPath')
                this.context.beginPath()
            }
        },
        // mouseup
        canvasUp(e) {
            console.log('canvasUp')
            const preData = this.context.getImageData(0, 0, 600, 400)
            if (!this.nextDrawAry.length) {
                // 当前绘图表面进栈
                this.middleAry.push(preData)
            } else {
                this.middleAry = []
                this.middleAry = this.middleAry.concat(this.preDrawAry)
                this.middleAry.push(preData)
                this.nextDrawAry = []
            }
            this.canvasMoveUse = false
        },
        // mousedown
        canvasDown(e) {
            console.log('canvasDown')
            this.canvasMoveUse = true
            // client是基于整个页面的坐标
            // offset是cavas距离顶部以及左边的距离
            const canvasX = e.clientX - e.target.parentNode.offsetLeft
            const canvasY = e.clientY - e.target.parentNode.offsetTop
            this.setCanvasStyle()
            // 清除子路径
            this.context.beginPath()
            // 当前绘图表面状态
            const preData = this.context.getImageData(0, 0, 600, 400)
            // 当前绘图表面进栈
            this.preDrawAry.push(preData)
        },
        // 生成图片
        getImage() {
            const canvas = document.querySelector('#canvas')
            const src = canvas.toDataURL('image/png')
            this.imgUrl.push(src)
            sessionStorage.setItem('sign_img', src);

            this.$router.push({ path: '/' + sessionStorage.getItem('mater') })
            /* if (!this.isPc()) {
                // window.open(`data:text/plain,${src}`)
                window.location.href = src
            } */
        },
        // 设置绘画配置
        setCanvasStyle() {
            this.context.lineWidth = this.config.lineWidth
            this.context.shadowBlur = this.config.shadowBlur
            this.context.shadowColor = this.config.lineColor
            this.context.strokeStyle = this.config.lineColor
        },
        goback() {
            this.$router.push({ path: '/' + sessionStorage.getItem('mater') })
        }
    }
}
</script>

<style>
@media screen and (max-width: 700px) {
    #canvas-drawImage h5 {
        display: none;
    }
}

#canvas-drawImage {
    position: absolute;
    width: 100%;
    height: auto;
    margin-top: 100%;
}

.inner.draw {
    display: flex;
    flex-direction: row;
    height: 100%;
}

.draw h5 {
    margin-bottom: 10px;
}

.wrap {
    width: 740px;
    border: 1px #585858 solid;
    overflow: hidden;
}

.fl {
    float: left;
    display: block;
}

.SubmitBtn {
    background: #668292;
    width: 35%;
    height: 3.2rem;
    border-radius: 6px;
    border: none;
    color: #fff;
    font-size: 17px;
    outline: none;
    margin: 8rem 0 0 3rem;
}

#canvas {
    border-right: 1px #585858 solid;
    cursor: crosshair;
}

#canvas-color ul {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

#canvas-color ul li {
    float: left;
    display: inherit;
    width: 13px;
    height: 13px;
    border: 3px #fff solid;
    margin: 8px;
    cursor: pointer;
}

#canvas-color .active {
    border: 1px solid #f2849e;
}
</style>